<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router"

const { path } = useRoute()
console.log(path);

const isShowCategory = ref(false)
const showCategory = (isShow: boolean) => {
    console.log(path);
    
    if (isShow && path !== "/home") {
        isShowCategory.value = true
    } else {
        isShowCategory.value = false
    }
}
</script>

<template>
    <nav>
        <ul>
            <li @mouseenter="showCategory(true)" @mouseleave="showCategory(false)">
                <a href="javascript:;">全部商品分类</a>
                <section class="category-list" v-show="isShowCategory">
                </section>
            </li>
            <li><a href="javascript:;">服装城</a></li>
            <li><a href="javascript:;">美妆馆</a></li>
            <li><a href="javascript:;">尚品汇超市</a></li>
            <li><a href="javascript:;">全球购</a></li>
            <li><a href="javascript:;">闪购</a></li>
            <li><a href="javascript:;">团购</a></li>
            <li><a href="javascript:;">有趣</a></li>
            <li><a href="javascript:;">秒杀</a></li>
        </ul>
    </nav>
</template>

<style scoped lang="less">
@import "@/styles/mixins.less";
@import "@/styles/common.less";
@import "@/styles/extends.less";

nav {
    .border-1px-switch(bottom, @border-input, 2px);

    ul {
        height: 45px;
        .flex-row-center(true);

        li {
            font-size: @middle-font-size;
            padding: 0px 40px;
            height: 100%;
            line-height: 45px;

            &:hover {
                font-weight: bold;
                color: @font-white;
                background-color: @border-input;
            }

            &:first-of-type {
                position: relative;
            }

            .category-list {
                position: absolute; // 脱离文档流
                left: 0;
                top: 45px;
                width: 100%;
                height: 200px;
                background-color: black;
            }
        }
    }
}
</style>